<template>
  <div class="shopcar">
    <div class="checkAll">
      <input v-model="checkAll" type="checkbox" @click="clickCheckAll">
      全选
    </div>
    <div class="shopList">
      <template v-if="chooseList.length !== 0">
        <div v-for="item in chooseList" :key="item.id" class="carItem">
          <span v-if="item.disabled" class="understock">库存不足或缺货</span>
          <input
            type="checkbox"
            :disabled="item.disabled"
            :checked="item.checked"
            @click="clickCheckItem(item)"
          >
          <div class="name">{{ item.name }}</div>
          <div class="right">
          <div class="totalNumber">库存： <span>{{ item.totalNumber + item.unit }}</span></div>
          <NumInput :item="item" @change="changeNum(item,$event)" />
          <span class="unit"> {{ item.unit }} </span>
        </div>
        </div>
      </template>

      <el-empty v-else description="暂无数据" class="empty" />
    </div>

    <!-- 申请备注 -->
    <div class="note">
      <span>备注: </span>
      <el-input
        v-model="note"
        style="width: 100%;"
        type="textarea"
        :autosize="{ minRows: 4 }"
        placeholder="请输入内容"
      />
    </div>

    <div class="footer">
      <el-button @click="$emit('back')">返回</el-button>
      <el-button type="primary" class="clear" @click="clear">清空不足物料</el-button>
      <el-button type="danger" @click="delMessage">删除</el-button>
      <el-button type="success" @click="postMessage">申领</el-button>
    </div>
  </div>
</template>

<script>
import { createStorehouseOrderAPI } from '@/api/web/hjUser.js'
import { mapState } from 'vuex'
import NumInput from './numInput.vue'
export default {
  components: {
    NumInput
  },
  props: {},
  data() {
    return {
      checkAll: false,
      data: [],
      note: ''
    }
  },
  computed: {
    ...mapState('hjuser', ['chooseList','chemicalData','standardSubstanceData','reagentData']),
  },
  watch: {
    chooseList(n) {
      this.data = JSON.parse(JSON.stringify(n))
    }
  },

  created() {
    this.$store.commit('hjuser/updatedChooseList', this.chooseList.filter(item=>item.name))
    const dataAll = [...this.chemicalData,...this.standardSubstanceData,...this.reagentData]
    this.data = JSON.parse(JSON.stringify(this.chooseList))
     this.data.forEach(item=>{
       item.num = item.countType == 1 ? 1 : 0.1
      if(!dataAll.find(v=>v.index==item.index)){
        item.disabled = true
      }
    })
    this.$store.commit('hjuser/updatedChooseList', this.data)
    this.checkAll =this.chooseList.filter(v=>!v.disabled).every(item =>item.checked === true)
    this.data = JSON.parse(JSON.stringify(this.chooseList))
  },
  methods: {
    clickCheckAll() {
      if (this.data.length > 0) {
        this.data = this.data.map(
          item =>{
            if(!item.disabled){
             return item = { ...item, checked: !this.checkAll }
            }else{
             return item = { ...item, checked: false }
            }
            }
        )
        this.$store.commit('hjuser/updatedChooseList', this.data)
      }
    },
    clickCheckItem(val) {
      const index = this.data.findIndex(item => item.id === val.id)
      this.data.splice(index, 1, { ...val, checked: !val.checked })
      this.$store.commit('hjuser/updatedChooseList', this.data)
      const isAll = this.chooseList.filter(v=>!v.disabled).every(item =>item.checked === true)
      this.checkAll = isAll
    },
    async postMessage() {
      const filterData = this.chooseList.filter(item =>!item.checked)
      const postData = this.chooseList.filter(item => item.checked).map(v => {
        delete v.checked
        return v
      })
      if (postData.length > 0) {
        // postData,发送数据 接口
        try {
          await createStorehouseOrderAPI(
           postData,
           this.note,
        )

        this.$message.success('领用申请成功')
        this.$emit('back', 1,filterData)
        } catch (error) {
          this.$store.commit(
          'hjuser/updatedChooseList',
          this.chooseList=this.chooseList.map(item =>({...item, checked: false}))
        )
        this.checkAll =false
        this.$message.error('操作失败，请重新申领')
        }
      } else {
        this.$message.error('请选择需要领用的物料')
      }
    },
    delMessage() {
      const postData = this.chooseList.filter(item => item.checked)
      if (postData.length > 0) {
        this.$store.commit(
          'hjuser/updatedChooseList',
          this.chooseList.filter(item => !item.checked)
        )
        if (this.chooseList.length == 0) {
          this.checkAll = false
        }
        this.$message.success('删除成功')
      } else {
        this.$message.error('请选择需要删除的物料')
      }
    },
    changeNum(item, val) {
      item.num = val
      this.data=this.data.map(v=>{
        if(v.id==item.id) {
          v.num = val
        }
        return v
      })
      this.$store.commit('hjuser/updatedChooseList', this.data)
    },
    clear(){
      this.$store.commit('hjuser/updatedChooseList', this.chooseList.filter(item => !item.disabled))
      if(this.chooseList.filter(item => item.disabled).length==0){
         this.$message('暂无库存不足物料')
      }else{
        this.$message.success('清空成功')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.shopcar {
  .checkAll {
    margin-bottom: 5px;
    padding: 0 45px;
    display: flex;
    align-items: center;
    height: 45px;
    background-color: #fff;
    border-radius: 7px;

    input {
      width: 18px;
      height: 18px;
      margin-right: 6px;
    }
  }
  .shopList{
    height: 700px;
    overflow: hidden;
  }
  .carItem {
    position: relative;
    padding: 10px 45px;
    margin: 0 auto 8px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    background-color: #fff;
    border-radius: 7px;
     .understock{
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 12px;
      color: red;
     }
    input {
      width: 15px;
      height: 15px;
      margin-right: 20px;
    }
    .name {
      width: 60%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .right {
      width: 40%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .unit {
      width: 35px;
      text-align: center;
    }
    .totalNumber {
      white-space: nowrap;
    }
  }
 .note {
  display: flex;
  align-items: flex-start;
  span {
    width: 80px;
    white-space: nowrap;
  }
 }
  .footer ::v-deep{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 20px 0 15px 0;
    button {
      margin-left: 10px;
      border-radius: 4px;
      width: 65px;
      height: 42px;
      font-size: 12px;
      padding: 9px 15px;
      // border: 1px solid #fff;
      // background-color: #edeffb;
    }
    .clear {
      width: 120px;
    }
  }
}
</style>
